const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    devtool: "inline-source-map",
    entry: {
        main: "./src/main.ts",
    },
    devServer: {
        static: './dist',
        hot: true,
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: "[name]-bundle.js",
    },
    resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".ts", ".tsx", ".js"],
    },
    module: {
        rules: [
            // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
            { test: /\.tsx?$/, loader: "ts-loader" },
            {
                //正则表达式，表示.css后缀的文件
                test: /\.css$/,
                //针对css文件使用的loader，有先后顺序，数组项越靠后越先执行(从下到上，从右到左)
                use: ['style-loader', 'css-loader']
            },
            {
                //正则表达式，表示图片文件
                test: /\.(png|jpg|gif|svg)$/,
                //针对图片文件使用的loader
                loader: 'file-loader',
                //选项，可以让打包后的图片保持原先的名称
                options: {
                    name: 'images/[name].[ext]'
                }
            }
        ],
    },
    plugins: [
        new htmlWebpackPlugin({
            //HTML模板路径
            template: './public/index.html'
        })
    ]
};